import React from "react"
import ReactSwipe from 'react-swipe';
import "./style.less"

export default class Banner extends React.Component{

  constructor(){
    super();
    this.state = {
      index: 0
    }
  }

  render(){

    const banners = this.props.banners;

    const opt = {
      auto: 6000,
      callback:function(index,ele){
        this.setState({
          index:index
        })
      }.bind(this)
    }
    return(
      <div id="home-category">
        <ReactSwipe swipeOptions={opt}>
          {
            banners.map((element,index) => {
              return (
                <div key={index} className="carousel-item">
                  <img src={element} alt="提示" />
                </div>
              )
            })
          }
        </ReactSwipe>
        <div className="index-container">
          <ul>
            {
              banners.map((element,index) => {
                return <li key={index} className={this.state.index === index ? "selected" : ''}></li>
              })
            }
          </ul>
        </div>
      </div>
    )
  }
}
